<template>

	<el-container>

		<el-aside>

			<el-menu class="el-menu-vertical-demo" default-active="home" unique-opened background-color="#304156"
				text-color="#BFCBD9" style="border-right: none;" active-text-color="#409EFF" router
				:collapse="isCollapse">

				<el-menu-item index="home">
					<i class="el-icon-s-home"></i>
					<span slot="title">首页</span>
				</el-menu-item>

				<el-menu-item index="community">
					<i class="el-icon-office-building"></i>
					<span slot="title">小区管理</span>
				</el-menu-item>

				<el-submenu index="2">
					<template slot="title">
						<i class="el-icon-caret-bottom"></i>
						<span>帮买取快递废品回收</span>
					</template>

					<el-menu-item-group>

						<el-menu-item index="store">
							<i class="el-icon-caret-right"></i>
							<span>门店管理</span>
						</el-menu-item>
						<el-menu-item index="courier">
							<i class="el-icon-caret-right"></i>
							<span>驿站管理</span>
						</el-menu-item>
						<el-menu-item index="goods">
							<i class="el-icon-caret-right"></i>
							<span>商品管理</span>
						</el-menu-item>
						<el-menu-item index="2-4">
							<i class="el-icon-caret-right"></i>
							<span>订单管理</span>
						</el-menu-item>
						<el-menu-item index="2-5">
							<i class="el-icon-caret-right"></i>
							<span>废品回收订单</span>
						</el-menu-item>

					</el-menu-item-group>
				</el-submenu>

				<el-submenu index='3'>
					<template slot="title">
						<i class="el-icon-caret-bottom"></i>
						<span>胖虎甄选</span>
					</template>
					<el-menu-item-group>

						<el-menu-item index="3-1">
							<i class="el-icon-caret-right"></i>
							<span>商品管理</span>
						</el-menu-item>
						<el-menu-item index="3-2">
							<i class="el-icon-caret-right"></i>
							<span>订单管理</span>
						</el-menu-item>
						<el-menu-item index="3-3">
							<i class="el-icon-caret-right"></i>
							<span>售后管理</span>
						</el-menu-item>

					</el-menu-item-group>
				</el-submenu>

				<el-submenu index='4'>
					<template slot="title">
						<i class="el-icon-caret-bottom"></i>
						<span>胖虎家政</span>
					</template>
					<el-menu-item-group>

						<el-menu-item index="domestic">
							<i class="el-icon-caret-right"></i>
							<span>家政服务</span>
						</el-menu-item>
						<el-menu-item index="4-2">
							<i class="el-icon-caret-right"></i>
							<span>订单管理</span>
						</el-menu-item>
						<el-menu-item index="4-3">
							<i class="el-icon-caret-right"></i>
							<span>售后订单</span>
						</el-menu-item>

					</el-menu-item-group>
				</el-submenu>

				<el-menu-item index="5">
					<i class="el-icon-user"></i>
					<span slot="title">用户管理</span>
				</el-menu-item>

				<el-menu-item index="6">
					<i class="el-icon-bicycle"></i>
					<span slot="title">骑手管理</span>
				</el-menu-item>

				<el-menu-item index="7">
					<i class="el-icon-brush"></i>
					<span slot="title">家政管理</span>
				</el-menu-item>

				<el-menu-item index="8">
					<i class="el-icon-present"></i>
					<span slot="title">新用户红包</span>
				</el-menu-item>

				<el-menu-item index="9">
					<i class="el-icon-menu"></i>
					<span slot="title">类目管理</span>
				</el-menu-item>

			</el-menu>

		</el-aside>

		<el-container>

			<el-header>
				<div class="header-left">
					<i id="iconbtn" :class="icon" @click="isbtn"></i>
				</div>

				<div class="header-right">
					<el-dropdown @command="handleCommand">
						<span class="el-dropdown-link">
							<i class="el-icon-s-custom"></i><span class="user">账户</span>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
							<el-dropdown-item command="logout">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>

			</el-header>

			<el-main>

				<transition name="fade">
					<router-view>

					</router-view>
				</transition>

			</el-main>

		</el-container>

	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				isCollapse: false,
				icon: 'el-icon-s-fold icon',

			}
		},


		methods: {
			handleCommand(data) {
				if (data == 'logout')
					this.$router.push('/')
			},
			isbtn() {
				this.isCollapse = !this.isCollapse
				this.icon = this.icon == 'el-icon-s-unfold' ? 'el-icon-s-fold icon' : 'el-icon-s-unfold'

			},
		}
	}
</script>

<style scoped>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 210px;
	}



	.el-container {
		height: 100vh;
	}

	.el-aside {
		width: auto !important;
		display: flex;

		/* background-color: #304156; */
		height: 100%;
	}


	.el-header {
		height: 60px;
		box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
	}

	.el-menu-item-group .el-menu-item-group__title {
		display: none;
	}

	.el-dropdown-link {
		cursor: pointer;
		display: flex;
		align-items: center;
	}

	.header-left {
		float: left;
	}

	.header-left #iconbtn {
		font-size: 26px;
		padding-top: 17px;
		cursor: pointer;
	}

	.header-right {
		float: right;
		line-height: 60px;
	}

	.el-icon-s-custom {
		font-size: 25px;
	}

	.user {
		font-size: 16px;
	}

	.el-aside {
		overflow: auto;
		scrollbar-width: none;

		/* Firefox
		-ms-overflow-style: none;

		/* IE and Edge */
		&::-webkit-scrollbar {
			/* WebKit browsers */
			display: none;
		}
	}

	.el-main {
		overflow: auto;
		scrollbar-width: none;

		/* Firefox
		-ms-overflow-style: none;
		
		/* IE and Edge */
		&::-webkit-scrollbar {
			/* WebKit browsers */
			display: none;
		}
	}

	.el-aside span {
		margin-left: 15px;
	}

	.fade-enter {
		opacity: 0;
	}

	.fade-enter-active {
		transition: opacity 0.3s ease-in-out 0.6s;
	}

	.fade-enter-to {
		opacity: 1;
	}

	.fade-leave {
		opacity: 1;
	}


	.fade-leave-active {
		transition: all 0.5s ease-out;
	}

	.fade-leave-to {
		opacity: 0;
		transform: translateX(30px);
	}
</style>